Skip to main content link. Accesskey S
  • Help
  • HCL Logo
  • HCL Notes and Domino Application Development wiki
  • THIS WIKI IS READ-ONLY. Individual names altered for privacy purposes.
  • HCL Forums and Blogs
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • API Documentation
Search
Community Articles > Designing Applications > Designing XPage Applications > XPages primitive file picker
  • Share Show Menu▼
  • Subscribe Show Menu▼

Recent articles by this author

NotesName sample JavaScript code for XPages

Here is sample JavaScript code for the class NotesName. Eventually this sample code will find its way into the documentation. Corrections and comments are appreciated.

NotesMIMEEntity sample JavaScript code for XPages

Here is sample JavaScript code for the class NotesMIMEEntity. Eventually this sample code will find its way into the documentation. Corrections and comments are appreciated.

NotesViewEntryCollection sample JavaScript code for XPages

Here is sample JavaScript code for the class NotesViewEntryCollection. Eventually this sample code will find its way into the documentation. Corrections and comments are appreciated.

NotesViewNavigator sample JavaScript code for XPages

Here is sample JavaScript code for the class NotesViewNavigator. Eventually this sample code will find its way into the documentation. Corrections and comments are appreciated.

NotesViewEntry sample JavaScript code for XPages

Here is sample JavaScript code for the class NotesViewEntry. Eventually this sample code will find its way into the documentation. Corrections and comments are appreciated.
Community articleXPages primitive file picker
Added by ~Elizabeth Umkroskiettu | Edited by ~Elizabeth Umkroskiettu on January 27, 2011 | Version 9
  • Actions Show Menu▼
expanded Abstract
collapsed Abstract
Here is the design for a simple file picker using basic XPage components. For demonstration purposes, the picker displays the text content of a picked file. It's amazing how little code is needed for implementation.
ShowTable of Contents
HideTable of Contents
    • 0.1 Global variables
    • 0.2 Initialization
    • 0.3 Computed fields and display area
    • 0.4 List box
    • 0.5 Up button
    • 0.6 Source code for the XPage
At run time, the user sees:
  • A computed field with the name of the current directory.
  • A button for moving up in the directory hierarchy.
  • A list box with the content of the current directory. Clicking on a file displays the file content. Clicking on a directory moves down to that directory in the hierarchy.
  • A computed field with the name of a file being displayed.
  • A multiline edit box for displaying a picked file.

File picker at run time

A description of the design follows. At the end of the article is the XPage source.

Global variables

  • sessionScope.dirname is the current directory. A sessionScope variable is needed because this value crosses requests.
  • requestScope.filename is the picked file.
  • requestScope.status is the display area for the file content.

Initialization


The following beforePageLoad event initializes sessionScope.dirname to the top directory of the C drive.

if (sessionScope.dirname == null) {
	sessionScope.dirname = "c:\\";
}


Computed fields and display area


The computed field above the list box is simply the value of the scoped variable holding the name of the current directory.

#{sessionScope.dirname}


The computed field above the file display area is slightly more complicated. We don't want it to appear if the file the user has clicked on is a directory.

if (sessionScope.dirname == requestScope.filename) {
	return "";
}
return requestScope.filename;


The display area for file content is multiline edit box simply bound to a scoped variable.

#{requestScope.status}


List box


The data binding for the list box is the scoped variable for the filename. So when the user selects from the list, that value goes to requestScope.filename.

#{requestScope.filename}


Computing the values to select from is simple thanks the ability of SSJS to directly use standard Java objects. This code uses the file name as the label and the full path name as the value for the selection items.

var list = (new java.io.File(sessionScope.dirname)).listFiles();
var olist = new Array();
for (var i = 0; i < list.length; i++) {
	olist.push(list[i].getName() + "|" + list[i].getAbsolutePath());
}
return olist;


The heaviest code is the onchange event for the list box. When the use makes a selection, either the directory is reset or a file is displayed. A bit of housekeeping is also needed. This code excludes some file types not suitable for display; you may want to exclude more or otherwise handle such files.

// Set dirname if a directory is selected
if ((new java.io.File(requestScope.filename)).isDirectory()) {
	sessionScope.dirname = requestScope.filename;
	requestScope.status = "";
// Exclude files you don't want to try to display
} else if (requestScope.filename.toLower().endsWith(".exe")) {
	requestScope.status = "This is an executable file.";
} else if (requestScope.filename.toLower().endsWith(".zip")) {
	requestScope.status = "This is a zip file.";
} else if (requestScope.filename.toLower().endsWith(".nsf")) {
	requestScope.status = "This is an NSF file.";
// etcetera
} else {
// Use NotesStream to get the content of the file
	var stream = session.createStream();
	if (stream.open(requestScope.filename)) {
		requestScope.status = stream.readText();
		stream.close();
	} else {
		requestScope.status = "Could not open " + requestScope.filename;
	}
}


Up button


The button for moving up in the hierarchy removes the last element from the current directory name and does a bit of housekeeping.

if (sessionScope.dirname.endsWith("\\")) {
	sessionScope.dirname = sessionScope.dirname.left

(sessionScope.dirname.length - 1);
}
sessionScope.dirname = sessionScope.dirname.left(dirname.lastIndexOf("\\")) + "\\";
requestScope.filename = "";
requestScope.status = "";

Also this button is visible only when:

sessionScope.dirname != "c:\\"


Source code for the XPage



<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.beforePageLoad><![CDATA[#{javascript:
	if (sessionScope.dirname == null) {
	sessionScope.dirname = "c:\\";
}}]]></xp:this.beforePageLoad>
	<xp:text escape="true" id="computedField1" 
	value="#{sessionScope.dirname}" 
	style="font-family:Courier New,sans-serif;
	font-size:10pt;color:rgb(0,0,255);font-weight:bold"></xp:text>
	<xp:button id="button1" icon="/vwicn109.gif">
	<xp:this.rendered><![CDATA[#{javascript:
	sessionScope.dirname != "c:\\"}]]></xp:this.rendered>
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="complete">
			<xp:this.action>
			<![CDATA[#{javascript:if (sessionScope.dirname.endsWith("\\")) {
	sessionScope.dirname = sessionScope.dirname.left(sessionScope.dirname.length - 1);
}
sessionScope.dirname = sessionScope.dirname.left(dirname.lastIndexOf("\\")) + "\\";
requestScope.filename = "";
requestScope.status = "";}]]></xp:this.action>
		</xp:eventHandler></xp:button>
	<xp:br></xp:br>
	
	<xp:listBox id="listBox1"
		style="width:381.0px;height:125.0px;
		font-family:Courier New,sans-serif;font-size:10pt;color:rgb(0,0,255)"
		value="#{requestScope.filename}">
		<xp:selectItems>
			<xp:this.value><![CDATA[#{javascript:
			var list = (new java.io.File(sessionScope.dirname)).listFiles();
var olist = new Array();
for (var i = 0; i < list.length; i++) {
	olist.push(list[i].getName() + "|" + list[i].getAbsolutePath());
}
return olist;}]]></xp:this.value>
		</xp:selectItems>
		<xp:eventHandler event="onchange" submit="true"
			refreshMode="complete">
			<xp:this.action><![CDATA[#{javascript:
			// Set dirname if a directory is selected
if ((new java.io.File(requestScope.filename)).isDirectory()) {
	sessionScope.dirname = requestScope.filename;
	requestScope.status = "";
// Exclude files you don't want to try to display
} else if (requestScope.filename.toLower().endsWith(".exe")) {
	requestScope.status = "This is an executable file.";
} else if (requestScope.filename.toLower().endsWith(".zip")) {
	requestScope.status = "This is a zip file.";
} else if (requestScope.filename.toLower().endsWith(".nsf")) {
	requestScope.status = "This is an NSF file.";
} else {
// Use NotesStream to get the content of the file
	var stream = session.createStream();
	if (stream.open(requestScope.filename)) {
		requestScope.status = stream.readText();
		stream.close();
	} else {
		requestScope.status = "Could not open " + requestScope.filename;
	}
}
}]]></xp:this.action>
		</xp:eventHandler>
	</xp:listBox>
	<xp:br></xp:br>
	<xp:br></xp:br>
	<xp:text escape="true" id="computedField2" 
	style="font-family:Courier New,sans-serif;
	font-size:10pt;color:rgb(0,0,255);font-weight:bold">
	<xp:this.value><![CDATA[#{javascript:
	if (sessionScope.dirname == requestScope.filename) {
	return "";
}
return requestScope.filename;}]]></xp:this.value></xp:text>
	<xp:br></xp:br>
	<xp:inputTextarea id="inputTextarea1"
		style="width:765.0px;height:160.0px" value="#{requestScope.status}">
	</xp:inputTextarea>

</xp:view>


(See attached file: picker.jpg)

  • Actions Show Menu▼


expanded Attachments (0)
collapsed Attachments (0)
Edit the article to add or modify attachments.
expanded Versions (9)
collapsed Versions (9)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (9)Jan 27, 2011, 10:49:39 PM~Elizabeth Umkroskiettu  
8Jan 27, 2011, 10:43:06 PM~Ben Eljipypulettu  
7Jan 27, 2011, 10:37:52 PM~Ben Eljipypulettu  
6Jan 27, 2011, 10:26:22 PM~Ben Eljipypulettu  
5Jan 27, 2011, 10:06:32 PM~Ben Eljipypulettu  
4Jan 27, 2011, 9:59:22 PM~Ben Eljipypulettu  
3Jan 27, 2011, 9:57:16 PM~Ben Eljipypulettu  
2Jan 27, 2011, 9:55:50 PM~Ben Eljipypulettu  
1Jan 27, 2011, 9:53:21 PM~Ben Eljipypulettu  
expanded Comments (0)
collapsed Comments (0)
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedAbout
  • HCL Software
  • HCL Digital Solutions community
  • HCL Software support
  • BlogsDigital Solutions blog
  • Community LinkHCL Software forums and blogs
  • About HCL
  • Privacy
  • Accessibility